<template>
  <el-container id="container">
    <el-header>
      <el-steps :active="1" align-center>
        <el-step title="选择座位"></el-step>
        <el-step title="2分钟内付款"></el-step>
        <el-step title="影院取票观影"></el-step>
      </el-steps>
    </el-header>
    <el-container class="content">
      <el-aside>
        <div class="legend">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconzuowei"></use></svg
            >可选座位</span
          >
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconzuowei-copy"></use></svg
            >已售座位</span
          >
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconyixuanzuowei-copy"></use></svg
            >已选座位</span
          >
        </div>
        <img class="screen" src="../assets/image/screen.png" />
        <div style="text-align: center">银幕中央</div>

        <div class="seat_container">
          <span class="span_itemx" v-for="(itemx, i) in seatLayout" :key="i">
            <span class="seat_xaxis">{{ i + 1 }}</span>
            <span class="span_itemy" v-for="(itemy, j) in itemx" :key="j">
              <svg
                v-show="seatLayout[i][j] == 0"
                class="icon"
                aria-hidden="true"
                @click="selectSeat(i, j)"
              >
                <use xlink:href="#iconzuowei"></use>
              </svg>
              <svg
                v-show="seatLayout[i][j] == 1"
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#iconzuowei-copy"></use>
              </svg>
              <svg
                v-show="seatLayout[i][j] == 2"
                class="icon"
                aria-hidden="true"
                @click="selectSeat(i, j)"
              >
                <use xlink:href="#iconyixuanzuowei-copy"></use>
              </svg>
            </span>
            <br />
          </span>
        </div>
      </el-aside>
      <el-main>
        <el-form ref="form" :model="form">
          <el-form-item>
            <img width="149" height="202" :src="form.filmPicture" />
            <div class="film_info">
              <h2 :title="form.filmName">{{ form.filmName }}</h2>
              <div>类型：{{ filmCategory }}</div>
              <div>时长：{{ form.filmLength }}分钟</div>
            </div>
          </el-form-item>
          <el-form-item label="影厅">
            <span>{{ form.hallName }}</span>
          </el-form-item>
          <el-form-item label="场次">
            <span>{{ form.playOpenTime }}</span>
          </el-form-item>
          <el-form-item label="票价">
            <span>¥{{ form.price }}/张</span>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="座位">
            <span v-if="seatTags.length == 0" style="color: gray"
              >一次最多选六个座位</span
            >
            <div
              v-if="seatTags.length == 0"
              style="text-align: center; margin: 22px auto"
            >
              请<span style="color: red">点击左侧</span>座位图选择座位
            </div>
            <el-tag
              v-else
              :key="seat"
              v-for="seat in seatTags"
              closable
              type="danger"
              :disable-transitions="true"
              @close="cancelSeat(seat, 0)"
            >
              {{ seat }}
            </el-tag>
          </el-form-item>
          <el-form-item label="总价">¥{{ total }}</el-form-item>
          <el-divider></el-divider>
          <div style="text-align: center; color: red">{{ userPhone }}</div>
          <el-form-item style="text-align: center">
            <el-button
              type="danger"
              round
              :disabled="isDisabled"
              @click="submit"
            >
              确认选座
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <el-dialog
      title="提示"
      :visible.sync="seatDialogVisible"
      width="20%"
      center
    >
      <span>一次性所选的座位数不能超过六个</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="seatDialogVisible = false"
          >知道了</el-button
        >
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      seatLayout: [],
      form: {},
      filmId: "",
      openTime: "",
      filmCategory: "",
      seatTags: [],
      tempArray: [],
      notSelected: "#iconzuowei",
      selected: "#iconzuowei-copy",
      seatDialogVisible: false,
      total: 0,
      userPhone: "",
      isDisabled: true,
    };
  },
  created() {
    this.getSeatList();
    this.filmId = this.$route.query.filmId;
    this.openTime = this.$route.query.openTime;
    this.getPreOrder();
    const memberPhone = sessionStorage.getItem("memberPhone");
    this.userPhone = memberPhone != null ? memberPhone : "请先登录";
  },
  methods: {
    async getSeatList() {
      const { data: res } = await this.$http.get("common/seat/getList", {
        params: { id: sessionStorage.getItem("playId") },
      });
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        console.log(res.data);
        let seatList = res.data;
        let seatArray = new Array();
        for (let index = 0; index < 3; index++) {
          seatArray[index] = new Array(3);
          for (let j = 0; j < 3; j++) {
            seatArray[index][j] = "0";
          }
        }
        console.log(seatList);
        console.log(seatArray);
        for (let index = 0; index < seatList.length; index++) {
          seatArray[seatList[index].xaxis - 1][seatList[index].yaxis - 1] =
            seatList[index].status;
        }
        console.log(seatArray);
        this.seatLayout = seatArray;
      }
    },

    async getPreOrder() {
      const { data: res } = await this.$http.get(
        `/common/order/getPreOrder/${this.filmId}/${this.openTime}`
      );
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        console.log(res.data);
        this.form = res.data;
        let categoryArray = [];
        res.data.categoryList.forEach((element) => {
          categoryArray.push(element.cateName);
        });
        this.filmCategory = categoryArray.join(",");
        console.log(this.filmCategory);
      }
    },
    selectSeat(x, y, flag) {
      this.tempArray = [...this.seatLayout];
      if (this.tempArray[x][y] == "0") {
        this.tempArray[x][y] = "2";
        this.seatLayout = this.tempArray;
        if (this.seatTags.length < 6) {
          this.seatTags.push(x + 1 + "排" + (y + 1) + "座");
        } else {
          this.seatDialogVisible = true;
          this.selectSeat(x, y, 1);
        }

        this.total = this.seatTags.length * this.form.price;
        if (sessionStorage.getItem("memberId") != null) {
          this.isDisabled = false;
        }
      } else {
        this.tempArray[x][y] = "0";
        this.seatLayout = this.tempArray;
        if (flag != 1) {
          this.cancelSeat(x + 1 + "排" + (y + 1) + "座", 1);
        }
        this.total = this.seatTags.length * this.form.price;
      }
    },
    cancelSeat(tag, flag) {
      console.log(tag);
      console.log(flag);
      this.seatTags.splice(this.seatTags.indexOf(tag), 1);
      let row = tag.substring(0, tag.indexOf("排"));
      let rank = tag.substring(tag.indexOf("排") + 1, tag.indexOf("座"));

      if (flag != 1) {
        this.selectSeat(row - 1, rank - 1, 1);
      }
      if (this.seatTags.length == 0) {
        this.isDisabled = true;
      }
    },
    async submit() {
      this.form.orderTime = this.formatDate(new Date(), 2);
      this.form.phone = this.userPhone;
      this.form.orderStatus = 1;
      this.form.hallName = "1号厅";
      this.form.seat = this.seatTags.join(",");
      this.form.orderPrice = this.total;
      this.form.memberId = sessionStorage.getItem("memberId");
      const { data: res } = await this.$http.post("common/order/saveOrder", this.form);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        console.log(res.data);
        this.$router.push({
          path: "/order",
          query: { id: res.data },
        });
        location.reload();
      }
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  height: 800px;
}
.content {
  height: 720px;
}
.el-header {
  width: 1133px;
  margin: 20px auto;
}
.content {
  width: 70%;
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.el-aside {
  width: 65% !important;
}
.el-main {
  background-color: #f9f9f9;
  overflow: unset;
  .film_info {
    float: right;
    margin-right: 18px;
    div {
      font-size: 13px;
      height: 20px;
    }
    h2 {
      width: 132px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .el-tag {
    margin-right: 10px;
  }
  .el-button {
    margin-top: 30px;
    width: 236px;
  }
}
.icon {
  font-size: 36px;
}
.legend {
  margin: 30px auto;
  width: 58%;
  span {
    margin-right: 30px;
  }
}
.screen {
  display: block;
  width: 60%;
  margin: 10px auto;
}
.seat_container {
  text-align: center;
  margin-top: 30px;
  .icon {
    margin: 10px;
  }
  .seat_xaxis {
    position: relative;
    top: -10px;
    left: -28px;
  }
}
</style>

